<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--  -->
    <el-card>
      <!-- 搜索框和添加按钮 -->
      <el-row>
        <el-input
          placeholder="请输入内容"
          v-model="querylist.query"
          class="input-with-select"
          clearable
          @clear="getgoodslist"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="getgoodslist"
          ></el-button>
        </el-input>
        <el-button type="primary" @click="addgoods">添加商品</el-button>
      </el-row>
      <!-- 表格 -->
      <el-table :data="goodslist" style="width: 100%" border size="mini">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column
          label="商品名称"
          prop="goods_name"
        ></el-table-column>
        <el-table-column
          label="商品价格(元)"
          prop="goods_price"
          width="100px"
        ></el-table-column>
        <el-table-column label="商品重量" prop="goods_weight" width="70px"></el-table-column>
        <el-table-column label="创建时间" prop="add_time" width="160px">
            <!-- 使用过滤器来显示时间 -->
            <template slot-scope="scope">
                {{scope.row.add_time|dateFormat}}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              type="primary"
              size="mini"
              @click="editval(scope.row.goods_id)"
            ></el-button>
            <el-button
              icon="el-icon-delete"
              type="danger"
              size="mini"
              @click="deleteVal(scope.row.goods_id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
              <!-- 分页器 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="querylist.pagenum"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="querylist.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
    </el-card>
  </div>
</template>

<script>
import uri from "../../config/uri";
export default {
  data() {
    return {
      // 商品列表数据
      goodslist: [],
      // 商品列表参数
      querylist: {
        query: "",
        //当前页面
        pagenum: 1,
        // 显示页面数据条数
        pagesize: 5,
      },
      // 数据总条数
      total: 0,
    };
  },
  created() {
    this.getgoodslist();
  },
  methods: {
    // 商品列表数据的获取
    async getgoodslist() {
      const res = await this.$http.get(uri.getgoods, {
        params: this.querylist,
      });
      console.log(res);
      if (res.meta.status === 200) {
        this.goodslist = res.data.goods;
       this.total=res.data.total
      }
    },
    handleSizeChange(newsize) {
      this.querylist.pagesize = newsize;
      this.getgoodslist()
    },
    handleCurrentChange(newnum) {
      this.querylist.pagenum = newnum;
       this.getgoodslist()
      
    },
    // 删除商品
   async deleteVal(id){
       const deleteconfrim=await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch((err)=>err)
        if(deleteconfrim==='confirm'){
            const res =await this.$http.delete(uri.deletegoodsid+`/${id}`)
            if(res.meta.status===200){
                this.$message.success(res.meta.msg)
                this.getgoodslist()
            }else{
                this.$message.error(res.meta.status)
            }
        }else{
            this.$message.info("已取消删除")
        }
    },
    // 添加商品按钮
    addgoods(){
        this.$router.push("/goods/add")
    },
    // 修改商品按钮
   async editval(id){
        this.$router.push("/goods/edit")
        const res = await this.$http.get(uri.getgoodsid+`/${id}`)
        console.log(res)
    }
  },
};
</script>

<style lang="less" scoped>
.input-with-select {
  width: 400px;
  margin-right: 20px;
}
.el-table {
  margin: 20px 0;
}
</style>
